<template>
    <n-tooltip trigger="hover">
        <template #trigger>
            <n-input-number
                v-model:value="decimal"
                @blur="formatValue"
                :keyboard="{ ArrowUp: false, ArrowDown: false }"
                :style="style"
                placeholder="请填写"
                size="small"
                :min="min"
                :max="max"
                :bordered="border"
                :show-button="false"
            >
                <template #suffix>{{ prop.suffix }}</template>
            </n-input-number>
        </template>
        当前值：{{ decimal?.toFixed(prop.precision) }} {{ prop.suffix }}
        <span v-if="min != undefined">，最小 {{ min.toFixed(prop.precision) }} {{ prop.suffix }}</span>
        <span v-if="max != undefined">，最大 {{ max.toFixed(prop.precision) }} {{ prop.suffix }}</span>
    </n-tooltip>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const prop = defineProps({
    max: {
        type: Number,
        default: undefined,
    },
    min: {
        type: Number,
        default: undefined,
    },
    width: {
        type: Number,
        default: 80,
    },
    precision: {
        type: Number,
        default: 0,
    },
    suffix: {
        type: String,
        defaut: '',
    },
    base: {
        type: Number,
        default: 0,
    },
    border: {
        type: Boolean,
        default: false,
    },
})

const style = prop.border ? { width: prop.width + 'px' } : { width: prop.width + 'px', textAlign: 'center', borderBottom: '1px solid gray' }

const decimal = ref<number>(prop.base / parseInt('1' + '0'.repeat(prop.precision)))

const emit = defineEmits(['update:base'])

watch(decimal, (nv, _ov) => {
    emit('update:base', parseInt((nv * parseInt('1' + '0'.repeat(prop.precision))).toFixed(0)))
})

const formatValue = () => {
    if (decimal.value == null) {
        decimal.value = 0
    }
    decimal.value = parseFloat(decimal.value.toFixed(prop.precision))
}
</script>
